<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>图表统计</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <el-upload ref='bone'
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                >
                    <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
export default {
  data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response, file, fileList){
        let bone = this.$refs['bone']; 
        // bone.querySelectorAll('.el-upload--picture-card').style = 'none'

        let aa = document.getElementsByClassName('el-upload--picture-card')[0]
        console.log(aa)
        aa.style.display = 'none'
      }
    }
}
</script>
<style scoped>

</style>